<template>
  <div class="task-detail">
    <el-scrollbar max-height="65vh">
      <el-dialog
        :style="`--el-dialog-width:80%;height:80vh;`"
        :model-value="isShowDetail"
        :destroy-on-close="true"
        title=""
        width="74%"
        height="80vh"
        top="10vh"
        draggable
        custom-class="task-detail-dialog"
        @closed="handleClose"
        @close="handleClose"
      >
        <div class="task-content">
          <div class="content-left">
            <div class="content-left-top">
              <div class="content-top">
                <ul class="crumbs">
                  <li v-for="item in navigateList" :key="item.id" @click="getTaskDetailFn(item.id)">{{ item.name }}</li>
                </ul>
                <div class="title">{{ detail.name }}</div>
                <ul class="options">
                  <li>
                    <UpDate class="li" type="dropdown" :config="statusConfig(detail)">
                      <span class="flag"><VideoPlay /></span>
                      <span class="titles">
                        <i>{{ getDictItem("taskStatus", detail.status) }}</i>
                        <i>当前状态</i>
                      </span>
                    </UpDate>
                  </li>
                  <li>
                    <UpDate class="li" type="dropdown" :config="userConfig(detail)">
                      <span class="flag"><img :src="avatarUrl(detail.userId)" /></span>
                      <span class="titles">
                        <i>{{ detail.userName ? detail.userName : "--" }}</i>
                        <i>负责人</i>
                      </span>
                    </UpDate>
                  </li>
                  <li>
                    <UpDate class="li" type="date" :config="planStartTimeConfig(detail)">
                      <span class="calendar"><Calendar /></span>
                      <span class="titles">
                        <i>{{ detail.planStartTime ? dayJs(detail.planStartTime).format("YYYY-MM-DD") : "--" }}</i>
                        <i>计划开始时间</i>
                      </span>
                    </UpDate>
                  </li>
                  <li>
                    <UpDate class="li" type="date" :config="planEndTimeConfig(detail)">
                      <span class="calendar"><Calendar /></span>
                      <span class="titles">
                        <i>{{ detail.planEndTime ? dayJs(detail.planEndTime).format("YYYY-MM-DD") : "--" }}</i>
                        <i>计划结束时间</i>
                      </span>
                    </UpDate>
                  </li>
                </ul>
              </div>
              <span class="btn"><el-button type="danger" @click="delPlanFn(detail)"> 删除</el-button></span>
            </div>

            <div class="content-bottom">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane
                  :label="item.name"
                  :name="item.id"
                  v-for="(item, index) in navList"
                  :key="index"
                  @change="refreshHandle"
                >
                  <component :is="item.component" :id="item.id" />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="content-right">
            <el-tabs v-model="activeNameF" class="demo-tabs" @tab-click="handleClickF">
              <el-tab-pane :label="item.name" :name="item.id" v-for="(item, index) in navListRigth" :key="index">
                <component :is="item.component" :id="item.id" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, reactive, inject, provide } from "vue"; // defineAsyncComponent
import { ElMessage } from "element-plus";
import type { TabsPaneContext } from "element-plus";
import UpDate from "../../components/UpDate/index.vue";
import TaskInfo from "./TaskInfo.vue";
import TaskSonInfo from "./TaskSonInfo.vue";
import ProjectFile from "./ProjectFile.vue";
import ProjectSubFile from "./ProjectSubFile.vue";
import dayJs from "dayjs";
import { useDict } from "@/hooks/useDict";
//api
import { getListAllUser } from "@/api/modules/sys";
import { getTaskDetail, updateProjectTask, deleteProjectTask } from "@/api/modules/project";
// hooks
const { getDictItem, getDict } = useDict(["taskStatus"]);
import { useHandleData } from "@/hooks/useHandleData";
// inject
const refresh = inject("refresh");
const getTaskPath = inject("getTaskPath");
// 初始化数据
const props = defineProps({
  isShowDetail: { type: Boolean, default: false },
  id: { type: String, default: "" }
});
const emit = defineEmits(["update:is-show-detail"]);
const activeName = ref(1);
const activeNameF = ref(8);
const navList = reactive([
  {
    name: "任务信息",
    id: 1,
    component: TaskInfo
  },
  {
    name: "子任务",
    id: 2,
    component: TaskSonInfo
  }
]);
const navListRigth = reactive([
  {
    name: "项目文件",
    id: 8,
    component: ProjectFile
  },
  {
    name: "项目附件",
    id: 9,
    component: ProjectSubFile
  }
]);

// 变量
const urlResource = window?.staticConfig.urlResource;
const listAllUser = ref<any>([]);
const detail = ref<any>({});
let navigateList = ref([]);
// computed
const avatarUrl = computed(() => id => {
  const obj = listAllUser.value.find(item => item.id == id);
  return obj && obj.avatarUrl ? urlResource + obj.avatarUrl : "";
});
const statusConfig = computed(() => data => {
  return {
    data,
    other: { options: getDict("taskStatus") },
    style: { height: 200 },
    key: "status",
    api: async params => {
      return await editChange("", params);
    },
    successCallback: () => {
      ElMessage.success("修改成功");
    }
  };
});
const userConfig = computed(() => data => {
  return {
    data,
    other: { options: listAllUser.value },
    style: { height: 200 },
    key: "userId",
    api: async params => {
      const obj = listAllUser.value.find(item => item.id == params.userId);
      if (obj) {
        params.userName = obj.name;
      }
      return await editChange("", params);
    },
    successCallback: () => {
      ElMessage.success("修改成功");
    }
  };
});
const planStartTimeConfig = computed(() => data => {
  return {
    data,
    key: "planStartTime",
    api: async params => {
      return await editChange("", params);
    },
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      ElMessage.success("修改成功");
    }
  };
});
const planEndTimeConfig = computed(() => data => {
  return {
    data,
    key: "planEndTime",
    api: async params => {
      return await editChange("", params);
    },
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      ElMessage.success("修改成功");
    }
  };
});
// 方法
const delPlanFn = async item => {
  await useHandleData(deleteProjectTask, { id: item.id }, `删除该任务`);
  emit("update:is-show-detail", false);
  refresh();
};
const editChange = async (val, params) => {
  try {
    await updateProjectTask({
      id: params.id,
      remark: params.remark,
      parentId: params.parentId,
      projectId: params.projectId,
      projectName: params.projectName,
      code: params.code,
      name: params.name,
      description: params.description,
      userId: params.userId,
      userName: params.userName,
      priorityId: params.priorityId,
      planStartTime: params.planStartTime,
      planEndTime: params.planEndTime,
      startTime: params.startTime,
      endTime: params.endTime,
      stageId: params.stageId,
      markerId: params.markerId,
      status: params.status
    });
    if (val) {
      ElMessage.success("修改成功");
    }
    refresh();
  } catch (e) {
    console.log(e);
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name;
  console.log(tab, event);
};
const handleClickF = (tab: TabsPaneContext, event: Event) => {
  activeNameF.value = tab.props.name;
  console.log(tab, event);
};
const getTaskDetailFn = async id => {
  refreshHandle(id || props.id);
  const { data } = await getTaskDetail({ id: id || props.id });
  detail.value = data;
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};
const handleClose = () => {
  emit("update:is-show-detail", false);
};
const refreshHandle = id => {
  navigateList.value = getTaskPath(id, []);
};
// provide
provide("detail", detail);
provide("refreshDetail", getTaskDetailFn);
onMounted(() => {
  getTaskDetailFn();
  getListAllUserFn();
});
</script>
<style lang="scss">
.task-detail-dialog {
  height: 100%;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    height: 100%;
    padding: 0;
    ul,
    li,
    p {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    i {
      font-style: normal;
    }
    .task-content {
      display: flex;
      height: 100%;
      .el-tabs {
        display: flex;
        flex: 1;

        // flex-flow: column nowrap;
        height: 100% !important;
      }
      .content-left {
        display: flex;
        flex: 1;
        flex-flow: column nowrap;
        .content-left-top {
          display: flex;
          justify-content: space-between;
          .btn {
            margin-top: 10px;
            margin-right: 10px;
          }
        }
        .content-top {
          display: flex;
          flex-flow: column nowrap;
          padding: 12px 0 0 20px;
          .crumbs {
            display: flex;
            flex-flow: row wrap;
            li {
              height: 25px;
              padding: 3px 10px;
              margin-right: 10px;
              font-size: 14px;
              font-weight: 400;
              line-height: 25px;
              color: #333333;
              cursor: pointer;
              background: #f9f9f9;
              border-radius: 2px;
            }
            li:hover {
              color: #ffffff;
              background: $primary-color;
            }
          }
          .title {
            width: 100%;
            height: 45px;
            margin-top: 26px;
            overflow: hidden;
            font-size: 24px;
            line-height: 45px;
            color: #333333;
            text-overflow: ellipsis;
          }
          .options {
            display: flex;
            margin-top: 34px;
            .li {
              display: flex;
              align-items: center;
              margin-right: 114px;
              .flag {
                width: 32px;
                height: 32px;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .titles {
                display: flex;
                flex-flow: column nowrap;
                i:first-child {
                  font-size: 14px;
                  font-weight: 400;
                  color: #333333;
                }
                i:last-child {
                  margin-top: 2px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #999999;
                }
              }
              .calendar {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                margin-right: 10px;
                font-size: 16px;
                color: #999999;
                border: 1px dashed #cccccc;
                border-radius: 50%;
                svg {
                  width: 16px;
                  height: 16px;
                }
              }
            }
            .li:hover {
              color: $primary-color;
              .calendar {
                color: $primary-color;
                border: 1px dashed $primary-color;
              }
            }
          }
        }
        .content-bottom {
          flex: 1;
        }
      }
      .content-right {
        box-sizing: border-box;
        flex: 0 0 390px;
        overflow: hidden;
        border-left: 1px solid #f4f4f4;
      }
    }
  }
  .el-tabs__content {
    flex: 1;
    height: 0;
  }
  .el-scrollbar__view {
    flex: 1;
    height: 100%;
  }
  .el-tab-pane {
    height: 100%;
  }
}
</style>
